<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Single-spa-yes</title>
</head>

<body>

</body>
<a onclick="a()">应用1</a>
<a onclick="b()">应用2</a>
<script src="./lib/umd/single-spa.js"></script>
<script>
    // function a() {
    //     history.pushState('/a');
    // }
    // function b() {
    //     history.pushState('/b');
    // }
    // activeWhen匹配上，则加载应用（此时未启动未挂载）
    // singleSpa.registerApplication('app1',
    //     async () => {
    //         return {
    //             bootstrap: async () => {
    //                 console.log('应用启动');
    //             },
    //             mount: async () => {
    //                 console.log('应用挂载');
    //             },
    //             unmount: async () => {
    //                 console.log('应用卸载')
    //             }
    //         }
    //     },
    //     location => location.hash.startsWith('/a'),
    //     { store: { name: 'xiaotianshi' } }
    // );
    // singleSpa.registerApplication('app2',
    //     async () => {
    //         return {
    //             bootstrap: async () => {
    //                 console.log('应用启动2');
    //             },
    //             mount: async () => {
    //                 console.log('应用挂载2');
    //             },
    //             unmount: async () => {
    //                 console.log('应用卸载2')
    //             }
    //         }
    //     },
    //     location => location.hash.startsWith('/b'),
    //     { store: { name: 'xiaotianshi2' } }
    // );
    
    // 切换url中路由即可测试 => /#/app1 => /#/app2
    singleSpa.registerApplication('app1',
        async () => {
            return {
                bootstrap: async () => {
                    console.log('应用启动');
                },
                mount: async () => {
                    console.log('应用挂载');
                },
                unmount: async () => {
                    console.log('应用卸载')
                }
            }
        },
        location => location.hash.startsWith('#/app1'),
        { store: { name: 'xiaotianshi' } }
    );
    singleSpa.registerApplication('app2',
        async () => {
            return {
                bootstrap: async () => {
                    console.log('应用启动2');
                },
                mount: async () => {
                    console.log('应用挂载2');
                },
                unmount: async () => {
                    console.log('应用卸载2')
                }
            }
        },
        location => location.hash.startsWith('#/app2'),
        { store: { name: 'xiaotianshi2' } }
    );
    // 启动应用
    singleSpa.start();
</script>

</html>